<template>
  <div>
    <ul>

      <Item v-for="p in person" :key="p.id" v-bind="p" :count="1" :deletePersonById="deletePersonById"></Item>
    </ul>
  </div>
</template>

<script>
import Item from '@/components/Item.vue'

// 创建并暴漏组件
export default {
  name: 'App',
  components: {
    Item
  },
  data() {
    return {
      person: [
        { id: 1, name: '老于', hobby: ['吃', '喝', 'piao'] },
        { id: 2, name: '坤坤', hobby: ['唱', '跳', 'rap'] },
        { id: 3, name: '婉丽', hobby: ['幽默', '风趣', '快乐'] },
        { id: 4, name: '老李', hobby: ['学习', '吃饭', '读书'] }
      ]
    }
  },
  methods: {
    /* 
      props做子传父
          props自己封装一个函数，并把函数通过props的形式传递给子组件
          子组件接收这个函数 并调用传参
          父组件的函数被执行，并且接收到了参数 完成子传父

          总结：
            props传值：父传子
            props传函数：子传父
          
    */
    deletePersonById(id) {
      // console.log(id)
      // 删除数组中值的方法有两种
      // 1.splice:需要知道被删除元素的下标，并且每次只能删除一个
      // 2.filter：删除一个或者多个数组的元素 得到结果直接替换之前的数组
      this.person = this.person.filter(item => {
        return item.id !== id
      })
    }
  }
}
</script>

<style>
</style>